// 1  10  普通变量 数组的变量

// 1 先定义一个 数组 echart数组
// 2 在每一个函数 内部 如果要创建echart对象  -  顺便添加一份到数组中 
// 3 在函数的外面  定义一次 全局事件 window.onresize = 
// 4 事件中 开始对 echarts数组做循环！！！  
// 5 item 等于一个echart对象
// myChart.resize =    item.resize 

// 1 定义echarts 对象数组
const echartsList = [];

// 点位分布统计
function pointDistribution() {
  // var myChart = echarts.init(document.getElementById('main'));
  const myChart = echarts.init(document.querySelector(".pd-content-chart"));
  option = {
    // 背景透明
    // backgroundColor: 'transparent',

    // 设备每一个饼颜色
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    tooltip: {
      trigger: 'item'
    },

    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ["10%", '70%'],
        center: ['50%', '50%'],
        data: [
          { value: 20, name: '云南', label: { color: '#006cff' } },
          { value: 26, name: '北京', label: { color: '#60cda0' } },
          { value: 24, name: '山东', label: { color: '#ed8884' } },
          { value: 25, name: '河北', label: { color: '#ff9f7f' } },
          { value: 20, name: '江苏', label: { color: '#0096ff' } },
          { value: 25, name: '浙江', label: { color: '#9fe6b8' } },
          { value: 30, name: '四川', label: { color: '#32c5e9' } },
          { value: 42, name: '湖北', label: { color: '#1d9dff' } }
        ].sort(function (a, b) {
          return a.value - b.value;
        }),
        roseType: 'radius',

        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        }
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);


  echartsList.push(myChart);





}


// 订单量模块
function orderCount() {
  /* 
  1 数据的动态渲染 
    1 根据数据 自己设定数据结构 -  怎么方便实现效果 怎么来
    2 数据 设定成数组形式 
    3 数据显示到页面中 先显示 索引为0 的数据
    4 根据索引 激活显示 
  2 开启定时器  自动轮播
    1 定时器里面 orderIndex 递增 
  3 点击标题 切换显示 
    1 给标题绑定点击事件
    2 事件触发的时候 先暂停定时器
    3 再对标题和内容 选中
    4 重新开启定时器 
  
   */

  // 1 设定数组的格式

  let orderIndex = 0;
  // 定时器id
  let timeId;

  const list = [
    {
      title: "365天",
      values: ['20,301,987', '99834']
    },
    {
      title: "90天",
      values: ['301,987', '9834']
    },
    {
      title: "30天",
      values: ['1,987', '3834']
    },
    {
      title: "24小时",
      values: ['987', '834']
    }
  ]
  // 2 根据数组 动态渲染标签
  let title = "";
  list.forEach((item, index) => {
    title += ` <h6>${item.title}</h6> `;

    //  如果当index 不是最后一个 元素  拼接 竖线 div

    if (index !== list.length - 1) {
      title += ` <div class="line"></div> `;
    }
  });
  $(".order-title").html(title);
  // 给标题绑定点击事件
  $(".order-title h6").click(function () {
    // 暂停定时器 
    clearInterval(timeId);
    // 你当前点击的标题的索引 $(this).index("h6")
    orderIndex = $(this).index("h6");
    renderByIndex();

    timeId = goInterval();// 重新开启定时器

  })
  // 根据索引选中标题和显示内容
  renderByIndex();
  // 3 定时器
  timeId = goInterval();// 开启定时器 同时返回了定时器的id

  // 根据索引选中标题和显示内容
  function renderByIndex() {
    // 根据 orderIndex 决定选中谁
    $(".order-title h6").eq(orderIndex).addClass("active").siblings().removeClass("active");

    // 2 渲染 数值部分

    // 2 找到第0个 order-item元素  list[orderIndex].values[0]
    $(".order-item").eq(0).find(".order-value").text(list[orderIndex].values[0]);
    // 2 找到第1个 order-item元素
    $(".order-item").eq(1).find(".order-value").text(list[orderIndex].values[1]);
  }
  // 开启定时器
  function goInterval() {
    let tid = setInterval(() => {
      orderIndex++;
      if (orderIndex === list.length) {
        orderIndex = 0;
      }
      // 标题切换选中
      renderByIndex();
    }, 1000);

    return tid;

  }
}

// 销售额统计
function saleCount() {
  /* 
  1 设定数据结构 初次动态渲染 
  2 定时器 自动轮播图 
  3 点击不同标题 切换选中
    1 给标题绑定点击事件
    2 触发事件 暂停定时器
    3 内容切换选中
    4 重新开启定时器 
  
   */

  const myChart = echarts.init(document.querySelector(".sell-count-content"));

  const list = [
    {
      title: "年",
      values: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ],
    },
    {
      title: "季",
      values: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
      ],
    },
    {
      title: "月",
      values: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
      ],
    },
    {
      title: "周",
      values: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
      ]
    },
  ]
  let index = 1;

  let timeid;

  // 1 生成标题 

  let titleHTML = "";

  list.forEach(item => {
    titleHTML += `  <div class="line"></div> <span>${item.title}</span>`;
  });

  $(".subtitles").html(titleHTML);

  // 根据标题 显示内容
  renderByIndex();
  // 2 开启定时器
  timeid = goInterval();
  // 3 给标题绑定点击事件
  $(".subtitles span").click(function () {

    clearInterval(timeid);

    // 获取被点击标题的索引
    index = $(this).index("span");

    renderByIndex();

    timeid = goInterval();
  })



  // 根据索引 选中标题 和 显示图表
  function renderByIndex() {
    $(".subtitles span").eq(index).addClass("active").siblings().removeClass("active");
    // 1 生成图表 
    let option = {
      title: {
        // 二级标题
        subtext: "单位(万)",
        subtextStyle: {
          color: "blue",
        },
        left: 100,
        top: -10
      },
      // 控制网格上下的位置
      grid: {
        top: 25,
        bottom: 40,
        left: 40
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        textStyle: {
          // 图例的文字颜色
          color: "blue"
        }
      },

      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          color: "blue"
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value',
        // x轴和轴刻度文字的配置
        axisLabel: {
          color: "blue"
        },
        // y轴上的 水平 刻度线 配置
        splitLine: {
          lineStyle: {
            color: "blue"
          }
        }
      },
      series: [
        {
          name: '预期销售额',
          type: 'line',
          data: list[index].values[0],// 第1条线数据  list[index][0]
          // 圆滑线条
          smooth: true,
          // 线条的颜色 
          itemStyle: {
            color: "red"
          }
        },
        {
          name: '实际销售额',
          type: 'line',
          data: list[index].values[1],// 第2条线数据  list[index][1]
          smooth: true
          ,
          itemStyle: {
            color: "aqua"
          }


        }
      ]
    };
    myChart.setOption(option);
  }

  // 开启定时器的方法
  function goInterval() {
    return setInterval(() => {
      index++;
      if (index === list.length) {
        index = 0;
      }

      // 根据索引显示对应的内容 
      renderByIndex();

    }, 1000);

  }


  echartsList.push(myChart);

}


// 渠道分布
function channel() {
  const myChart = echarts.init(document.querySelector(".channel-charts"));
  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        pointer: {
          show: false
        },
        itemStyle: {
          color: '#00abd7'
        },
        progress: {
          show: true,
          width: 18
        },
        axisLine: {
          lineStyle: {
            width: 18,
            color: [
              [0, '#00abd7'],

              [1, '#0f254b']
            ]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },

        detail: {
          valueAnimation: true,
          fontSize: 20,
          offsetCenter: [0, '-20%'],
          formatter: '{value}%',
          color: "#fff"
        },
        data: [
          {
            value: 50
          }
        ]
      }
    ]
  };




  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  echartsList.push(myChart);
}

// 设备数据统计
function deviceData() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector(".device-data"));

  var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json";

  /**
  此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
  
  默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
  当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
  
  http://echarts.baidu.com/option.html#series-map.geoIndex
  
  并且加了pin气泡图标以示数值大小
  */
  var points = [
    { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } }
    , { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' } }
    , { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' } }
    , { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' } }
    , { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' } }
    , { value: [123.1238, 42.1216], itemStyle: { color: '#f56321' } }
    , { value: [114.4995, 38.1006], itemStyle: { color: '#f56f1c' } }
    , { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' } }
    , { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' } }
    , { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' } }
    , { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' } }
    , { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' } }
    , { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' } }
    , { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' } }
    , { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' } }
    , { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' } }
    , { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' } }
    , { value: [119.4543, 25.9222] }
  ]
  // var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
  myChart.showLoading();
  let index = -1;


  echarts.registerMap('china', mapData);
  myChart.hideLoading();
  option = {
    backgroundColor: 'rgba(0,0,0,.3)',
    /*   title: {
           top: 20,
           text: '“困难人数” - 杭州市',
           subtext: '',
           x: 'center',
           textStyle: {
               color: '#ccc'
           }
       },*/

    // tooltip: {
    //     trigger: 'item',
    //     formatter: function(params) {
    //         console.log(params)
    //             return params.name + ' : ' + params.value[2];
    //     }
    // },
    /*visualMap: {
       min: 0,
       max: 1000000,
       right: 100,
       seriesIndex: 1,
       type: 'piecewise',
       bottom: 100,
       textStyle: {
         color: '#FFFF'
       },
       splitList: [
         {
           gt: 50000,
           color: '#F5222D',
           label: '困难人数大于5万人'
         }, //大于5万人
         {
           gte: 30000,
           lte: 50000,
           color: '#FA541C ',
           label: '困难人数3-5万人'
         }, //3-5万人
         {
           gte: 10000,
           lte: 30000,
           color: '#FA8C16',
           label: '困难人数1-3万人'
         }, //1-3万人
         {
           lte: 10000,
           color: '#fbe1d6',
           label: '困难人数小于1万人'
         }
       ]
     },*/

    geo: {
      map: 'china',
      aspectScale: 0.75, //长宽比
      zoom: 1.1,
      roam: false,
      itemStyle: {
        normal: {
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [{
              offset: 0,
              color: '#09132c' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#274d68'  // 100% 处的颜色
            }],
            globalCoord: true // 缺省为 false
          },
          shadowColor: 'rgb(58,115,192)',
          shadowOffsetX: 10,
          shadowOffsetY: 11
        },
        emphasis: {
          areaColor: '#2AB8FF',
          borderWidth: 0,
          color: 'green',
          label: {
            show: false
          }
        }
      },
      regions: [{
        name: '南海诸岛',
        itemStyle: {
          areaColor: 'rgba(0, 10, 52, 1)',

          borderColor: 'rgba(0, 10, 52, 1)',
          normal: {
            opacity: 0,
            label: {
              show: false,
              color: "#009cc9",
            }
          }
        },


      }],
    },
    series: [{
      type: 'map',
      roam: false,
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#1DE9B6'
          }
        },
        emphasis: {
          textStyle: {
            color: 'rgb(183,185,14)'
          }
        }
      },

      itemStyle: {
        normal: {
          borderColor: 'rgb(147, 235, 248)',
          borderWidth: 1,
          areaColor: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.8,
            colorStops: [{
              offset: 0,
              color: '#09132c' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#274d68'  // 100% 处的颜色
            }],
            globalCoord: true // 缺省为 false
          },
        },
        emphasis: {
          areaColor: 'rgb(46,229,206)',
          //    shadowColor: 'rgb(12,25,50)',
          borderWidth: 0.1
        }
      },
      zoom: 1.1,
      //     roam: false,
      map: 'china' //使用
      // data: this.difficultData //热力图数据   不同区域 不同的底色
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      showEffectOn: 'render',
      zlevel: 1,
      rippleEffect: {
        period: 15,
        scale: 4,
        brushType: 'fill'
      },
      hoverAnimation: true,
      label: {
        normal: {
          formatter: '{b}',
          position: 'right',
          offset: [15, 0],
          color: '#1DE9B6',
          show: true
        },
      },
      itemStyle: {
        normal: {
          color: '#1DE9B6'/* function (value){ //随机颜色
   return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
   }*/,
          shadowBlur: 10,
          shadowColor: '#333'
        }
      },
      symbolSize: 12,
      data: points
    }, //地图线的动画效果
    {
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 7, //图标大小
      },
      lineStyle: {
        normal: {
          color: '#1DE9B6'
                          /* function (value){ //随机颜色
                          
                          ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
                          '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
                          '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
                          '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
                          '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
                          '#52b9c7','#4fb6d2','#4ab2e5']
   return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
   }*/,
          width: 1, //线条宽度
          opacity: 0.1, //尾迹线条透明度
          curveness: .3 //尾迹线条曲直度
        }
      },
      data: [
        { coords: [[118.8062, 31.9208], [119.4543, 25.9222]], lineStyle: { color: '#4ab2e5' } }
        , { coords: [[127.9688, 45.368], [119.4543, 25.9222]], lineStyle: { color: '#4fb6d2' } }
        , { coords: [[110.3467, 41.4899], [119.4543, 25.9222]], lineStyle: { color: '#52b9c7' } }
        , { coords: [[125.8154, 44.2584], [119.4543, 25.9222]], lineStyle: { color: '#5abead' } }
        , { coords: [[116.4551, 40.2539], [119.4543, 25.9222]], lineStyle: { color: '#f34e2b' } }
        , { coords: [[123.1238, 42.1216], [119.4543, 25.9222]], lineStyle: { color: '#f56321' } }
        , { coords: [[114.4995, 38.1006], [119.4543, 25.9222]], lineStyle: { color: '#f56f1c' } }
        , { coords: [[117.4219, 39.4189], [119.4543, 25.9222]], lineStyle: { color: '#f58414' } }
        , { coords: [[112.3352, 37.9413], [119.4543, 25.9222]], lineStyle: { color: '#f58f0e' } }
        , { coords: [[109.1162, 34.2004], [119.4543, 25.9222]], lineStyle: { color: '#f5a305' } }
        , { coords: [[103.5901, 36.3043], [119.4543, 25.9222]], lineStyle: { color: '#e7ab0b' } }
        , { coords: [[106.3586, 38.1775], [119.4543, 25.9222]], lineStyle: { color: '#dfae10' } }
        , { coords: [[101.4038, 36.8207], [119.4543, 25.9222]], lineStyle: { color: '#d5b314' } }
        , { coords: [[103.9526, 30.7617], [119.4543, 25.9222]], lineStyle: { color: '#c1bb1f' } }
        , { coords: [[108.384366, 30.439702], [119.4543, 25.9222]], lineStyle: { color: '#b9be23' } }
        , { coords: [[113.0823, 28.2568], [119.4543, 25.9222]], lineStyle: { color: '#a6c62c' } }
        , { coords: [[102.9199, 25.46639], [119.4543, 25.9222]], lineStyle: { color: '#96cc34' } }
      ]
    }

    ]
  };
  myChart.setOption(option, true);

  echartsList.push(myChart);
}

// 全国用户总量统计
function users() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector('.users'));


  const option = {
    grid: {
      show: true,
      borderWidth: 1,
      borderColor: "blue",
      top: 10,
      bottom: 30
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: "blue"
      },
      data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: "blue"
      },
      // y轴上的 水平 刻度线 配置
      splitLine: {
        lineStyle: {
          color: "blue"
        }
      }
    },
    series: [
      {
        data: [2100, 1900, 1700, 1560, 1400,
          { value: 1200, itemStyle: { color: "#254065" } },
          { value: 1200, itemStyle: { color: "#254065" } },
          { value: 1200, itemStyle: { color: "#254065" } },
          900, 750, 600, 480, 240],
        type: 'bar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#00fdfa' },

            { offset: 1, color: '#0061ce' }
          ])
        },
      }
    ]
  };


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  echartsList.push(myChart);
}

pointDistribution();//  点位分布统计
orderCount();// 订单量模块
saleCount();// 销售额统计
channel();// 渠道分布
deviceData();// 设备数据统计
users();// 全国用户总量统计


// 监听屏幕宽度改变事件
window.onresize = function () {
  echartsList.forEach(item => item.resize());
}

